<template>
    <div id = "fore-model" >
      <canvas id = "foreCanvas" v-el:fore_canvas
        height = "637" width = "950">
      </canvas>
      <div id = "scal-0">{{0}}</div>
      <div id = "scal-1">{{maxRange / 4}}</div>
      <div id = "scal-2">{{maxRange / 4 * 2}}</div>
      <div id = "scal-3">{{maxRange / 4 * 3}}</div>
      <div id = "gain"> GAIN: {{gain}}
      </div>

      <div class = "out">
        <div id = "arrow1" v-show = "outPut.value === 'FORE'">
          <img src = "../assets/arrow1.png" width = 15>
        </div>
        <div class = "out-put-name">
          <div style = "color: #368BB8"> FORE </div>
          <div class = "frequence"> {{frequence}}kHz </div>
        </div>
        <div id = "arrow2" v-show = "outPut.value === 'FORE'">
          <img src = "../assets/arrow2.png" width = 15>
        </div>
      </div>

      <div class = "fore-depth">
        {{depthValue}}
        <div class = "unit"> {{depthunit.value}} </div>
      </div>
      <div class = "fore-draught">
        DRAUGHT :{{draught}}
      </div>
    </div>
</template>

<script>
  import EchoMenu from '../utils/echo-menu'
  import EchoTool from '../utils/echo-tool'

  let _FE8020 = EchoMenu.getMenuItems('menu/Sounder/FE-8020 No.1')
  let _unit = EchoMenu.getMenuItems('menu/Display/Unit')
  let _alarmDepth = EchoMenu.menu[1]

  function draw () {
    let ctx = this.$els.fore_canvas.getContext('2d')
    EchoTool.clearEcho(ctx, this.frameWidth, 637)
    EchoTool.drawScale(ctx, this.frameWidth, '#FFFFFF')
    EchoTool.drawAlarmLine(ctx, this.frameWidth,
      this.maxRange, _alarmDepth.value)
    EchoTool.drawEcho(ctx, this.echoData, this.frameWidth,
      this.maxRange)
  }

  function startDrawEcho () {
    let _this = this
    setInterval(function () {
      draw.call(_this)
    }, 1000)
  }

  export default {
    data () {
      return {
        outPut: EchoMenu.menu[2],
        frequence: 200,
        depthunit: _unit[0],
        alarmDepth: _alarmDepth,
        FE8020: _FE8020,
        echoData: EchoTool.EchoData
      }
    },
    computed: {
      myWidth: function () {
        return 'width:' + '' + this.frameWidth + 'px'
      },
      depthValue: function () {
        let tmp = parseInt(this.depth)
        tmp = this.depth - tmp
        if (tmp === 0) {
          return this.depth.toString() + '.0'
        }
        return this.depth
      },
      gain: function () {
        if (this.FE8020[2].value === 'ON') {
          return 'AUTO'
        } else {
          let ret = this.FE8020[1].value
          if (ret > 0) {
            ret = ret.toString()
          }
          return ret
        }
      },
      draught: function () {
        let ret = this.FE8020[0].value
        if (ret % 10 === 0) {
          ret = ret.toString() + '.0'
        }
        ret = ret.toString() + ' ' + _unit[0].value
        return ret
      }
    },
    ready () {
      draw.call(this)
      startDrawEcho.call(this)
    },
    props: {
      depth: {
        type: Number,
        defalue: 10
      },
      frameWidth: {
        type: Number
      },
      maxRange: {
        type: Number,
        default: 10
      }
    },
    watch: {
      frameWidth: function () {
        draw.call(this)
      },
      maxRange: function () {
        draw.call(this)
      },
      'alarmDepth.value': function () {
        draw.call(this)
      }
    }
  }
</script>

<style lang = "less">
  #fore-model {
    height: 635px;
    width: 950px;
    text-align: right;
  }

  #scal-0 {
    position: relative;
    top: -630px;
    left: -60px;
    font-size: 30px;
  }

  #scal-1 {
    position: relative;
    top: -515px;
    left: -60px;
    font-size: 30px;
  }

  #scal-2 {
    position: relative;
    top: -400px;
    left: -60px;
    font-size: 30px;
  }

  #scal-3 {
    position: relative;
    top: -290px;
    left: -60px;
    font-size: 30px;
  }

  #gain {
    position: relative;
    top: -715px;
    text-align: left;
    font-size: 25px;
  }

  .out {
    white-space: nowrap;
    border: 1px solid #368BB8;
    position: relative;
    top: -800px;
    width: 130px;
    text-align: center;
  }

  .fore-depth {
    position: relative;
    top: -350px;
    font-size: 100px;
    text-align: left;
  }

  .fore-draught {
    position: relative;
    top: -360px;
    left: 100px;
    text-align: left;
    font-size: 25px;
  }

</style>
